<template>
	<view class="container">
		<view class="info">
			<image :src="card.image" mode=""></image>
			{{card.card_title}}
		</view>
		<!-- 基础表单校验 -->
		<uni-forms ref="form">
			<uni-forms-item name="category_id">
				<uni-data-select v-model="form.category_id" :localdata="range" placeholder="Card Sub-Category"
					@change="getAmount"></uni-data-select>
			</uni-forms-item>
			<uni-forms-item name="amount">
				<uni-easyinput v-model="form.amount" @blur="getAmount" placeholder="Card Amount" />
			</uni-forms-item>
		</uni-forms>
		<view class="tips">
			<view class=""> Rate:<span class="rate">{{rate}}</span>
			</view>
			<view class="">
				Tips:You can upload multiple cards at the once to benefit higher rates </view>
		</view>
		<view class="num">
			You get paid
			<text>{{money}}</text>
		</view>
		<view class="tips">
			<view class="">
				Notice for razer gold gift card
			</view>
			<rich-text :nodes="card.remark"></rich-text>
		</view>

		<view class="submitBtn upload" @click="choose">
			Upload lmages
		</view>
		<view class="list">
			<view class="col" v-for="(item,index) in imageList">
				<view class="item">
					<image :src="item" mode="aspectFill"></image>
					<uni-icons @click="del(index)" type="clear" size="24" color="#dd524d"></uni-icons>
				</view>
			</view>
		</view>
		<view class="tips">
			<uni-forms-item name="remark">
				<uni-easyinput v-model="form.remark" placeholder="Optional Comment" />
			</uni-forms-item>
		</view>
		<view class="submit" @click="submit">
			<view class="btn">
				Submit Trade
			</view>
		</view>
		<view class="seat">

		</view>
	</view>
</template>

<script>
	import {
		domain
	} from '@/utils/request.js'
	export default {
		data() {
			return {
				form: {
					currency_id: '',
					category_id: '',
					amount: '',
					remark:'',
				},
				value: '',
				range: [],
				card: {},
				id: '',
				rate: '-',
				money: '-',
				domain: '',
				imageList: [],

			}
		},
		onLoad(option) {
			this.domain = domain
			this.form.currency_id = uni.getStorageSync('currency_id')
			this.id = option.id
			this.getInfo()
		},
		methods: {
			getInfo(id) {
				this.$post("/index/cards_detail", {
					card_id: this.id
				}).then(res => {
					this.card = res.data.card
					this.range = res.data.category
					this.form.category_id = res.data.category[0].value
				})
			},
			getAmount() {
				if(this.form.amount == 0) return
				this.$post("/index/cards_amount", {
					...this.form,
					card_id: this.id
				}).then(res => {
					this.rate = res.data.rate
					this.money = res.data.currency_unit + res.data.total
				})
			},
			choose() {
				uni.chooseImage({
					count: 10, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						this.selectImg(res.tempFilePaths)
					}
				});
			},
			selectImg(path) {
				path.forEach(item => {
					uni.uploadFile({
						url: this.domain + "api/common/upload",
						header: {
							'token': uni.getStorageSync('token'),
						},
						filePath: item,
						name: 'file',
						success: (res) => {
							const data = JSON.parse(res.data)
							this.imageList.push(data.data.fullurl)
						}
					});
				})
			},
			del(index) {
				this.imageList.splice(index, 1)
			},
			submit() {
				this.$post("/user/cards_submit", {
					...this.form,
					card_id: this.id,
					images: this.imageList.join(",")
				}).then(res => {
					this.$toast(res.msg)
					setTimeout(() => {
						uni.navigateBack()
					}, 500)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 30rpx;
	}

	.info {
		display: flex;
		font-size: 40rpx;
		align-items: center;
		margin-bottom: 30rpx;

		image {
			width: 210rpx;
			height: 150rpx;
			margin-right: 40rpx;
		}
	}

	.tips {
		color: #999;
		font-size: 20rpx;
		border-bottom: 1rpx solid #eee;
		padding: 10rpx 0;

		text {
			font-weight: bold;
			display: block;
		}
		.rate{
			color: #E851D6;
		}
	}

	.upload {
		width: 265rpx;
		margin: 50rpx auto;
	}

	.Coupon {
		text-align: right;
		font-size: 28rpx;
		margin-bottom: 20rpx;
	}

	.num {
		text-align: center;
		font-size: 30rpx;
		margin: 50rpx 0;

		text {
			display: block;
			font-size: 48rpx;
			font-weight: bold;
			margin-top: 20rpx;
		}
	}

	.list {
		display: flex;

		.col {
			width: 20%;
			padding: 10rpx;

			.item {
				position: relative;
				padding: 50%;

				.uni-icons {
					position: absolute;
					top: 0;
					right: 0;
					transform: translate(50%, -50%);
				}

				image {
					width: 100%;
					height: 100%;
					position: absolute;
					left: 0%;
					top: 0;
				}
			}
		}
	}

	.submit {
		height: 128rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -10rpx 10rpx 0rpx rgba(53, 53, 53, 0.04);
		padding: 20rpx 30rpx;
		position: fixed;
		width: 100%;
		bottom: 0;
		left: 0;

		.btn {
			line-height: 88rpx;
			color: #FFFFFF;
			font-weight: bold;
			text-align: center;
			font-size: 30rpx;
			background: #0C0E27;
			border-radius: 8rpx;
		}
	}

	.seat {
		height: 128rpx;
	}
</style>